<template>
	<view class="res_list">
		<view class="res_item" v-for="(item,index) in reses" @longpress="showDeleteBtn">
			<view class="res_left">
				<image :src="item.merchantArticle.article.pictures[0].filePath" class="res_image" @click="goResDetail(item.merchantArticleID)"></image>
				<view class="user_field">
					<view class="user_avatar">
						<image :src="users[index].avatarUrl" class="avatar_image"></image>
					</view>
					<i class="user_name">{{users[index].name}}</i>
				</view>
			</view>
			<view class="res_right">
				<view class="res_attributes">
					<b class="res_name">{{item.merchantArticle.merchant.name}}</b>
					<view class="res_stars">
						<stars :light_num="item.merchantArticle.merchant.index" :dark_num="5-item.merchantArticle.merchant.index"></stars>
					</view>
					<i class="res_price">￥{{item.merchantArticle.merchant.price}}/人</i>
					<view class="res_foods">
						<image src="../../../static/icons/hanbao.png"></image>
						<p v-for="dash in item.merchantArticle.merchant.dashes">{{dash.name}}</p>
					</view>
					<view class="res_location">
					</view>
					<view class="praise_field">
						<praise :praiseNum="item.merchantArticle.article.praiseNumber" :type="'Merchant'" :praiseid="item.merchantArticleID"></praise>
					</view>
				</view>
			</view>
			<button v-if="isDelete" class="delete_btn" @click="deleteItem(item.merchantArticleID)">删除</button>
		</view>
	</view>
</template>

<script>
	import stars from "../../../components/stars.vue"
	import praise from "../../../components/praise.vue"
	export default {
		components:{
			stars,
			praise
		},
		data(){
			return{				
				reses:[],
				users:[],
				isDelete:false
			}
		},
		watch:{
			reses(newVal,oldVal){
				this.getusers()
			}
		},
		methods:{	
			showDeleteBtn(){
			
				this.isDelete=!this.isDelete
			},
			deleteItem(id){
				var that=this
				uni.showModal({
				    title: '提示',
				    content: '是否取消收藏？',
				    success: function (res) {
				        if (res.confirm) {
				           that.subCollect(id)
						   url:'/pages/user/user-favorite/index'
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			async subCollect(mid){
				const res=await this.$myRequest({
					url:'/User/api/subFavorite/userid='+10001+'&maid='+mid
				})
			},
			async getFavoriteRestaurants(uid){
				const res=await this.$myRequest({
					url:'/User/api/FavoriteMerchantArticles/id='+uid
				})				
				this.reses=res.data
				console.log(res)
				this.getusers()
			},			
			goResDetail(id){
				uni.navigateTo({
					url:'/pages/details/restaurant-details/detail?id='+id
				})
			},
			getusers(){
				var that=this
				console.log(this.reses.length)
				this.reses.forEach(async item=>{
					const userres=await that.$myRequest({
						url:'/User/api/find/id='+item.userID
						
					})					
					console.log(userres)
					that.users.push(userres.data);
				})
			}
		},
		created(){
			this.getFavoriteRestaurants(10001)				
		}
	}
</script>

<style lang="less">
	.delete_btn{
		width:65px;
		height:35px;
		line-height: 30px;
		z-index: 999;
		margin-left: 150px;
		margin-top:225px;
		background-color: #DD524D;
		color:#FFFFFF;
		font-weight:600;
		position: fixed;
		
	}
	.res_list{
		padding: 0 15rpx;
		display: flex;
		flex-wrap: wrap;
		.res_item{
			border-radius: 5%;
			border:1rpx solid #DCDFE6;
			background-color: #fff;
			margin-top:10px;
			width:100%;
			display: flex;
			.res_left{
				float: left;
				width: 35%;
				padding:8px 8px;
				.res_image{
					height:250rpx;
					width:100%;
					
				}
				.user_avatar{
					border:1px solid #eee;
					border-radius:50%;
					height:50rpx;
					width:50rpx;					
					margin-right: 8px;
					float: left;
					.avatar_image{
						height: 100%;
				        width:100%;
				        border-radius:50%;
				        background-color: #eee;
					}
				}
				.user_name{
					line-height: 30px;
					font-size: 12px;
					
				}
			}
			.res_right{
				padding:8px 8px;
				width:60%;
				.res_attributes{
					.res_name{
						font-size: 18px;
						font-weight: 600;
						line-height: 40px;
					}
					.res_stars{
						float:left;
						line-height: 30px;
						
					}
					.res_price{
						display: inline-block;
						line-height: 30px;
						margin-bottom:10px;
					}
					.res_foods{
						margin-bottom: 10px;
						white-space: nowrap;
						width:230px;
						text-overflow: ellipsis;
						overflow: hidden; 
						image{							
							width:30px;
							height:30px;
						}
						p{
							display: inline-block;
							transform: translateY(-10rpx);
							margin-left: 5px;
							color:#F0AD4E;
							line-height: 30px;
						}
					}
					.res_location{
						float:left;
					}
					.praise_field{
						float:right;
					}
				}
			}
		}
		
	}
</style>
